<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
        <title>DEMO | jQThumb Plugin</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <h1 class="tc">jQThumb</h1>
        <div class="container centerize">
            <div class="ptb screenshot-area">
                <div class="row mg screenshot-area">
                    <div class="span6 tc">
                        <div class="plr">
                            <div class="frame">
                                <div class="frame-pad"><div class="original" attr-src="picture.jpg"></div></div>
                            </div>
                        </div>
                    </div>
                    <div class="span6">
                        <div class="plr mb">
                            <div class="frame">
                            <div class="frame-pad"><div class="example1" attr-src="picture.jpg"></div></div>
                            </div>
                        </div>
                    </div>
                    <div class="span6">
                        <div class="plr mb">
                            <div class="frame">
                                <div class="frame-pad"><div class="example2" attr-src="picture.jpg"></div></div>
                            </div>
                        </div>
                    </div>
                    <div class="span4">
                        <div class="plr">
                            <div class="frame">
                                <div class="frame-pad"><div class="example3" attr-src="picture.jpg"></div></div>
                            </div>
                        </div>
                    </div>
                    <div class="span3">
                        <div class="plr">
                            <div class="frame">
                                <div class="frame-pad"><div class="example4" attr-src="picture.jpg"></div></div>
                            </div>
                        </div>
                    </div>
                    <div class="span3">
                        <div class="plr">
                            <div class="frame">
                                <div class="frame-pad"><div class="example5" attr-src="picture.jpg"></div></div>
                            </div>
                        </div>
                    </div>
                    <div class="span2">
                        <div class="plr mb">
                            <div class="frame">
                                <div class="frame-pad"><div class="example6" attr-src="picture.jpg"></div></div>
                            </div>
                        </div>
                    </div>
                    <div class="span2">
                        <div class="plr">
                            <div class="frame">
                                <div class="frame-pad"><div class="example7" attr-src="picture.jpg"></div></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <hr/>

            <h2 class="tc">Play Ground</h2>

            <div id="playground" class="row mg">
                <div class="span6">
                    <form class="plr">
                        <div class="row">
                            <label class="tr">Image URL:</label>
                            <div class="input"><div class="plr"><input type="text" id="url" placeholder="picture.jpg" value="picture.jpg" /></div></div>
                        </div>
                        <div class="row">
                            <label class="tr">Width:</label>
                            <div class="input">
                                <div class="plr">
                                    <div class="row">
                                        <div class="span8">
                                            <div class="pr">
                                                <input type="text" id="width" placeholder="100px" value="200" />
                                            </div>
                                        </div>
                                        <div class="span4">
                                            <div class="pr">
                                                <select id="width-type">
                                                    <option value="px" selected>PX</option>
                                                    <option value="%">%</option>
                                                    <option value="auto">Auto (full width)</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <label class="tr">Height:</label>
                            <div class="input">
                                <div class="plr">
                                    <div class="row">
                                        <div class="span8">
                                            <div class="pr">
                                                <input type="text" id="height" placeholder="100px" value="200" />
                                            </div>
                                        </div>
                                        <div class="span4">
                                            <div class="pr">
                                                <select id="height-type">
                                                    <option value="px" selected>PX</option>
                                                    <option value="%">%</option>
                                                    <option value="auto">Auto (full height)</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <label class="tr">Y Position:</label>
                            <div class="input">
                                <div class="plr">
                                    <div class="row">
                                        <div class="span8">
                                            <div class="pr">
                                                <input type="text" id="y" placeholder="50" value="50" />
                                            </div>
                                        </div>
                                        <div class="span4">
                                            <div class="pr">
                                                <select id="y-type">
                                                    <option value="px">PX</option>
                                                    <option value="%" selected>%</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <label class="tr">X Position:</label>
                            <div class="input">
                                <div class="plr">
                                    <div class="row">
                                        <div class="span8">
                                            <div class="pr">
                                                <input type="text" id="x" placeholder="50" value="50" />
                                            </div>
                                        </div>
                                        <div class="span4">
                                            <div class="pr">
                                                <select id="x-type">
                                                    <option value="px">PX</option>
                                                    <option value="%" selected>%</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <label class="tr">Zoom:</label>
                            <div class="input"><div class="plr"><input type="text" id="zoom" placeholder="1" value="1" /></div></div>
                        </div>
                        <div class="row">
                            <label class="tr">Render Position:</label>
                            <div class="input"><div class="plr">
                                <select id="renderPosition">
                                    <option value="before" selected="selected">Before</option>
                                    <option value="after">After</option>
                                </select>
                            </div></div>
                        </div>
                        <div class="row">
                            <label class="tr">On Demand:</label>
                            <div class="input"><div class="plr">
                                <select id="ondemand">
                                    <option value="false" selected="selected">False</option>
                                    <option value="true">True</option>
                                </select>
                            </div></div>
                        </div>
                        <div class="row">
                            <label class="tr">On Demand Event:</label>
                            <div class="input"><div class="plr">
                                <select id="ondemandevent" disabled>
                                    <option value="scroll" selected="selected">scroll</option>
                                    <option value="click">click</option>
                                    <option value="mouseenter">mouseenter</option>
                                </select>
                            </div></div>
                        </div>
                        <div class="row">
                            <label class="tr">Threshold:</label>
                            <div class="input"><div class="plr"><input disabled type="text" id="threshold" placeholder="0" value="0" /></div></div>
                        </div>
                        <div class="row">
                            <label class="tr">Method:</label>
                            <div class="input"><div class="plr">
                                <select id="method">
                                    <option value="auto" selected="selected">Auto</option>
                                    <option value="modern">CSS3 (modern browsers that support CSS3)</option>
                                    <option value="native">Native (older browsers)</option>
                                </select>
                            </div></div>
                        </div>
                        <div class="row">
                            <label class="tr"></label>
                            <div class="input">
                                <div class="plr tr">
                                    <button id="generate" type="button">Generate</button>
                                    <button id="kill" type="button">Kill</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="span6 tc">
                    <div class="plr tc">
                        <div class="frame">
                            <div class="frame-pad"><img src="picture.jpg" id="demo" /></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
    <script type="text/javascript" src="../bower_components/zepto/zepto.min.js"></script>
    <script type="text/javascript" src="../bower_components/zepto-data/zepto.data.min.js"></script>
    <script type="text/javascript" src="jqthumb.js"></script>
    <script type="text/javascript" src="main.js"></script>
</html>